<template>
  <el-row class="lib-search-item">
    <div class="content">
      <el-row class="row title">
        <span>毛泽东选集</span>
        <i class="el-icon-s-management"></i>
      </el-row>
      <el-row class="row contentText">
        <el-col :span="20">
          <span>索书号：</span>
          <span>A41/1</span>
        </el-col>
        <el-col :span="4" style="text-align: right;">
          <span>中文图书</span>
        </el-col>
      </el-row>
      <el-row class="row contentText">
        <el-col :span="20">
          <span>标准编码：</span>
          <span>7-01-000924-4 </span>
        </el-col>
        <el-col :span="4" style="text-align: right;">
          <span>馆藏：1</span>
        </el-col>
      </el-row>
      <el-row class="row contentText">
        <el-col :span="20">
          <span>出版信息：</span>
          <span>出版信息：人民出版社 1991.06</span>
        </el-col>
        <el-col :span="4" style="text-align: right;">
          <span>可外借：0</span>
        </el-col>
      </el-row>
      <el-row class="row contentText" style="margin-top: 8px;">
        <el-col :span="20" style="color: #3672fe;cursor: pointer;">
          <el-link style="color: #3672fe;">馆藏预览</el-link>
          <i class="el-icon-caret-bottom"></i>
        </el-col>
        <el-col :span="4" style="text-align: right;">
          <div :class="['btn', isSelect ? 'select' : 'unselect']">
            <i style="font-size: 17px;" :class="isSelect ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
            <span>{{ isSelect ? '取消' : '收藏' }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-row>
</template>

<script>
  export default {
    name: 'RightListItem',
    data() {
      return {
        isSelect: true
      }
    },
    props: {
      itemData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    }
  }
</script>

<style lang="scss">
  .lib-search-item {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 42px;
    .content {
      border-bottom: 1px solid #1890ff;
      padding-bottom: 26px;
      .row {
        height: 29px;
        line-height: 29px;
      }
      .title {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #4d86f7;
        span {
          margin-right: 18px;
        }
      }
      .contentText {
        font-size: 14px;
        color: #333333;
        span {
          margin-right: 8px;
        }
        .btn {
          user-select: none;
          cursor: pointer;
          display: inline-block;
          width: 73px;
          height: 26px;
          line-height: 26px;
          border-radius: 5px;
          text-align: center;
          transition: 0.1s;
          span {
            margin-left: 5px;
          }
        }
        .unselect {
          color: #f98550;
          border: 1px solid #f98550;
          &:hover {
            color: #fff;
            background-color: #f98550;
          }
        }
        .select {
          color: #fff;
          background-color: #f98550;
          border: 1px solid #f98550;
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
</style>
